<template>
	<view>
		<view class="record">
			<view class="z-flex-0" style="#FFF">
				<!-- <van-tabs sticky color="#1677FF" bind:change="onChange">
					<van-tab title="全部" name="''"></van-tab>
					<van-tab title="待审核" name="0"></van-tab>
					<van-tab title="已审核" name="1"></van-tab>
					<van-tab title="已转账" name="2"></van-tab>
					<van-tab title="已拒绝" name="-1"></van-tab>
				</van-tabs> -->
				<u-tabs
				       :list="tabList"
					   keyName="name"
				       lineWidth="40"
				       lineColor="#1677FF"
						@click="onChange"
				       :activeStyle="{
				           color: '#444445',
				           fontWeight: 'bold',
				       }"
				       :inactiveStyle="{
				           color: '#A4A9B7',
				           transform: 'scale(1)'
				       }"
				       itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;margin-top:12rpx;"
				   >
				   </u-tabs>
			</view>
			<view class="main-box">
				<scroll-view class="scroll-box" scroll-y="true" :show-scrollbar="false" enhanced="true" @scrolltolower="more">
					<view class="list-box z-margin-t-8">
						<view class="each z-margin-t-24 z-padding-32" v-for="(item,index) in list" @tap="previewImage(item.images)">
							<view class="z-flex-c-s-b">
								<view class="title">提现</view>
								<view class="time">{{ item.updatetime | date('yyyy-mm-dd hh:MM') }}</view>
							</view>
							<view class="z-flex-c z-padding-tb-16">
								<view class="money">金额：{{ item.num }}</view>
								<view class="z-flex-1"></view>
								<view class="state">
									<text v-if="item.state == 0">待审核</text>
									<text style="color: #1677ff" v-if="item.state == 1">审核通过</text>
									<text style="color: #62cb81" v-if="item.state == 2">已转账</text>
									<text style="color: #ff2121" v-if="item.state == -1">审核拒绝</text>
								</view>
								<image src="/static/service/photo.png" class="icon z-margin-l-16" v-if="item.state == 2"></image>
							</view>
							<view class="remark">提现账户：{{ item.withdraw_info }}</view>
							<view v-if="item.state == -1 " class="cause z-padding-t-16">拒绝原因：{{ item.note }}</view>
						</view>
					</view>
					<!-- <van-empty description="暂无记录" v-if="{{finish && list.length === 0}}" /> -->
					<u-empty v-if="finish && list.length === 0" text="列表为空" mode="list"></u-empty>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			state: '',
			list: [],
			finish: false,
			loading: false,
			page: 1,
			type: '',
			tabList:[
				{name:'全部',state:''},
				{name:'待审核',state:0},
				{name:'已审核',state:1},
				{name:'已转账',state:2},
				{name:'已拒绝',state:-1}
			],
		};
	},
	onLoad(options) {
		this.type = options.type
		this.reload();
	},
	methods: {
		onChange(event) {
			console.log(event)
			this.state = event.state
			this.reload();
		},
		previewImage(e) {
			let image = e;
			this.util.previewImage(image);
		},
		reload() {
			this.list = [],
			this.page = 1,
			this.finish = false
			this.getList();
		},
		more() {
			this.page = ++this.page
			this.getList();
		},
		getList() {
			if (!uni.getStorageSync('token')) return;
			if (this.finish) {
				return;
			}
			if (this.loading) {
				return;
			}
			this.loading = true
			let data = {
				page: this.page,
				state: this.state,
				type: this.type
			};

			this.http.get('withdraw/getlist', data)
				.then((res) => {
					if (res.data.length === 0) {
						this.finish = true
					}
					let arr = this.list.concat(res.data);
					this.list = arr
				})
				.finally((res) => {
					this.loading = false
				});
		}
	}
};
</script>

<style>
page {
	background-color: #edf1f4;
}
.record {
	height: 100vh;
	/* #ifdef H5 */
	height: calc(100vh - 90rpx);
	/* #endif */
	display: flex;
	flex-direction: column;
}
.main-box {
	flex: 1;
	overflow: hidden;
}
.scroll-box {
	height: 100%;
}
.each {
	width: 622rpx;
	background: #ffffff;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	opacity: 1;
	margin: auto;
}
.title {
	font-size: 24rpx;
	font-weight: 500;
	color: #1c274c;
}
.time {
	font-size: 24rpx;
	font-weight: 500;
	color: #a4a9b7;
}
.money {
	font-size: 24rpx;
	font-weight: 500;
	color: #ff9600;
}
.state {
	font-size: 24rpx;
	font-weight: 500;
	color: #1c274c;
}
.remark {
	font-size: 24rpx;
	font-weight: 500;
	color: #1c274c;
}
.cause {
	font-size: 24rpx;
	font-weight: 500;
	color: rgba(255, 33, 33, 0.95);
	line-height: 28rpx;
}

.icon {
	width: 30rpx;
	height: 30rpx;
}
</style>
